<template>
  <div class="roster-container org-home">
    <!-- 顶部区域 -->
    <div class="header flex">
      <div class="selecte-section flex">
        <!-- <div class="selecte-wrap flex">
          <img src="@/assets/images/partment.png" alt class="partment-icon" />
          <div class="selecte-title">行政部门</div>
          <Icon type="md-arrow-dropdown" class="dropdown" size="20" />
        </div>
        <Input search enter-button placeholder="搜索报表、报表描述" class="selecte-section-search" /> -->
      </div>
      <div class="right flex">
        <Button type="success" class="add-btn" @click="openRightCard">新增组织</Button>
        <Dropdown style="margin-left: 20px">
          <Button class="more-btn">
            显示筛选
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>
              <Checkbox v-model="single">隐藏组织类型</Checkbox>
            </DropdownItem>
            <DropdownItem>
              <Checkbox v-model="single">隐藏员工数</Checkbox>
            </DropdownItem>
            <DropdownItem>
              <Checkbox v-model="single">隐藏员工数</Checkbox>
            </DropdownItem>
            <DropdownItem>
              <Checkbox v-model="single">隐藏员工数</Checkbox>
            </DropdownItem>
            <DropdownItem>
              <Checkbox v-model="single">隐藏员工数</Checkbox>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <Dropdown style="margin-left: 20px">
          <Button class="more-btn">
            更多功能
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>批量删除员工</DropdownItem>
            <DropdownItem>回收站</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>

    <!-- 树形结构区域 -->
    <div class="tree-section">
      <!-- <div class="tree-header">
        <Row>
          <Col span="10" class="col">
            <div class="title">
              <span>组织名称</span>
            </div>
          </Col>
          <Col span="14" class="col">
            <Row class="row">
              <Col span="3" class="sub-col">组织类型</Col>
              <Col span="3" class="sub-col">员工数</Col>
              <Col span="3" class="sub-col">全职员工</Col>
              <Col span="3" class="sub-col">非全职员工</Col>
              <Col span="3" class="sub-col">人员编制</Col>
              <Col span="3" class="sub-col">缺编/超编</Col>
              <Col span="3" class="sub-col">负责人</Col>
              <Col span="3" class="sub-col">分管领导</Col>
            </Row>
          </Col>
        </Row>
      </div>-->
      <div class="tree-content">
        <!-- <Tree :data="data5"></Tree> -->
        <Table row-key="organization_id" :columns="columns16" :data="orgList" border :loading="tableLoading"></Table>
      </div>
    </div>

    <!-- 快速编辑 -->
    <div class="mask none" :class="{block:rightCardCloseStatus}" @click="closeRightCard"></div>
    <div class="right-cart none" :class="{block:rightCardCloseStatus}">
      <div class="right-cart-top flex">
        <div class="right-cart-title">{{isEdit ? '编辑' : '新增'}}组织</div>
        <Icon type="md-close" class="right-cart-close" size="24" @click="closeRightCard" />
      </div>
      <div class="right-cart-body">
        <Form :model="formItem" :label-width="110" ref="formValidate" :rules="ruleValidate">
          <div class="form-item-row">
            <FormItem label="组织名称" prop="organization_name">
              <Input v-model="formItem.organization_name" placeholder="请输入" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="组织代码" class="form-item">
              <Input v-model="formItem.organization_code" placeholder="请输入" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="组织简称" class="form-item">
              <Input
                v-model="formItem.organization_short_name"
                placeholder="请输入"
                class="form-input"
              ></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="组织类型" class="form-item">
              <Select v-model="formItem.organization_type" class="form-input">
                <Option value="公司">公司</Option>
                <Option value="部门">部门</Option>
              </Select>
            </FormItem>
            <!-- <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" /> -->
          </div>
          <div class="form-item-row" v-if="organizationList.length">
            <FormItem label="上级组织" class="form-item">
              <Select v-model="formItem.organization_id" class="form-input">
                <Option :value="item.organization_id" v-for="(item,index) in organizationList" :key="index">{{item.organization_name}}</Option>
              </Select>
            </FormItem>
            <!-- <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" /> -->
          </div>
          <div class="form-item-row">
            <FormItem label="组织负责人" class="form-item">
              <Input
                v-model="formItem.organization_leader"
                placeholder="员工姓名/拼音"
                class="form-input"
              ></Input>
            </FormItem>
          </div>
          <!-- <div class="form-item-row">
            <FormItem label="编制人数" class="form-item">
              <Input v-model="formItem.organization_number" placeholder="请输入" class="form-input"></Input>
            </FormItem>
          </div> -->

          <div class="form-item-row">
            <FormItem label="启用日期" prop="start_date">
              <DatePicker
                type="date"
                placeholder="请选择"
                v-model="formItem.start_date"
                format="yyyy-MM-dd"
                class="form-input"
              ></DatePicker>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="分管领导" class="form-item">
              <Input v-model="formItem.organization_subleader" placeholder="请输入" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="组织描述" class="form-item">
              <Input
                v-model="formItem.organization_description"
                type="textarea"
                placeholder="请输入"
                class="form-input"
              ></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="组织职能" class="form-item">
              <Input
                v-model="formItem.organization_functon"
                type="textarea"
                placeholder="请输入"
                class="form-input"
              ></Input>
            </FormItem>
          </div>
        </Form>
      </div>
      <div class="right-cart-footer">
        <Button v-if="isEdit" class="cancle-btn-border" @click="closeRightCard">取消</Button>
        <Button v-else class="cancle-btn-border pierced" :loading="saving1" @click="save(1)">{{save1Text}}</Button>
        <Button
          type="default"
          class="save-btn-green ml12"
          :loading="saving2"
          @click="save"
        >{{save2Text}}</Button>
      </div>
    </div>

    <!-- <div class="mask none" :class="{block:rightCardCloseStatus}" @click="closeRightCard"></div>
    <div class="right-cart none" :class="{block:rightCardCloseStatus}">
      <div class="right-cart-top flex">
        <div class="right-cart-title">人员编制</div>
        <Icon type="md-close" class="right-cart-close" size="24" @click="closeRightCard" />
      </div>
      <div class="right-cart-body">
        <div class="cart-item cart-item1">
          <div class="edit-item">
            <h2>
              当前编制人数：
              <span>3</span>人
              <em>（缺编3人）</em>
            </h2>
            <Button type="primary">调整编制</Button>
          </div>
          <div class="edit-hidden">
            <div class="edit-hidden-wrap">
              <div class="hidden-label">调整编制</div>
              <div class="hidden-input">
                <InputNumber :editable="false" class="hidden-inp"></InputNumber>
              </div>
              <Button class="hidden-btn">
                <Icon type="ios-checkmark" size="18" />
              </Button>
              <Button class="hidden-btn">
                <Icon type="ios-close" size="18" />
              </Button>
              <div class="hidden-btns"></div>
            </div>
            <div class="hidden-fotter">
              <Checkbox>不限编制</Checkbox>
            </div>
          </div>
        </div>

        <div class="cart-item cart-item2">
          <h2>部门人员概况</h2>
          <span>在职： 0人</span>
          <span>全职： 0人</span>
          <span>离职中： 0人</span>
          <span>待入职： 0人</span>
        </div>
        <div class="cart-item cart-item2 mt20">
          <h2>
            设置部门内岗位编制
            <a>添加岗位编制</a>
          </h2>
          <div class="sub-cart-row">
            <div class="job-title">
              行政助理
              <p>
                <span>缺编3人</span>
              </p>
            </div>
            <div class="middle-num">编制3人</div>
            <div class="right-btns flex">
              <div class="redbtn-text">移除</div>
              <div class="greenbtn-text">调整编制</div>
            </div>
          </div>
          <div class="sub-cart-row">
            <div class="job-title">
              行政助理
              <p>
                <span>缺编3人</span>
              </p>
            </div>
            <div class="middle-num">编制3人</div>
            <div class="right-btns flex">
              <div class="redbtn-text">移除</div>
              <div class="greenbtn-text">调整编制</div>
            </div>
          </div>
          <div class="sub-cart-row">
            <div class="job-title">
              行政助理
              <p>
                <span>缺编3人</span>
              </p>
            </div>
            <div class="middle-num">编制3人</div>
            <div class="right-btns flex">
              <div class="redbtn-text">移除</div>
              <div class="greenbtn-text">调整编制</div>
            </div>
          </div>
          <div class="sum">
            <div class="sum-title">合计：</div>
            <div class="sum-item">在岗人数0人</div>
            <div class="sum-item">岗位编制人数3人</div>
          </div>
        </div>
        <Nodata desc="未设置岗位编制"></Nodata>
      </div>

    </div>-->
    <!-- 快速编辑end -->

    <!-- modal -->

    <Modal v-model="modal1" title="设置组织负责人" @on-ok="ok" @on-cancel="cancel">
      <div class="modal-body">
        <Form :model="formItem" :label-width="120">
          <FormItem label="组织负责人">
            <Input v-model="formItem.input" placeholder="员工姓名/拼音" class="modal-input"></Input>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!-- end -->
  </div>
</template>
<script>
import { org } from "@/apis";
import http from "@/utils/http";

export default {
  name: "list",
  data() {
    return {
      modal1: false,
      single: false,
      openTableTitle: false,
      saving1: false,
      saving2: false,
      save1Text: "保存并继续添加",
      save2Text: "保存",
      id: 1,
      formItem: {
        organization_name: "",
        organization_code: "",
        organization_short_name: "",
        organization_type: "",
        organization_superior: "",
        organization_leader: "",
        organization_number: "",
        start_date: "",
        organization_subleader: "",
        organization_description:"",
        organization_functon: "",
        parent_organization_id:0,
      },
      ruleValidate: {
        organization_name:[
          {
            required: true,
            message: "组织名称不能为空",
            trigger: "blur"
          }
        ],
        start_date:[
          {
            required: true,
            type: 'date',
            message: "请选择启用日期",
            trigger: "change"
          }
        ]
      },
      rightCardCloseStatus: false,
      orgList: [],
      organizationList: [],
      columns16: [
        {
          title: "组织名称",
          key: "organization_name",
          tree: true,

          render: (h, data) => {
            return h(
              "div",
              {
                class: "left-hover-btns"
              },
              [
                h("span", { class: "left-btn organization_name",}, data.row.organization_name),
                h(
                  "a",
                  {
                    class: "left-btn",
                    on: {
                      click: () => {
                        this.addNew(data);
                      }
                    }
                  },
                  "新增下级"
                ),
                h(
                  "a",
                  {
                    class: "left-btn",
                    on: {
                      click: () => {
                        this.edit(data);
                      }
                    }
                  },
                  "编辑"
                ),
                // h(
                //   "a",
                //   {
                //     class: "left-btn",
                //     on: {
                //       click: () => {
                //         this.expand(data);
                //       }
                //     }
                //   },
                //   data.row.children && data.row.children.length > 0 ? !!data.row._showChildren ? "收起" : '展开' : ''
                // )
              ],
              "操作"
            );
          }
        },
        {
          title: "组织类型",
          width: 120,
          key: "organization_type"
        },
        {
          title: "员工数",
          width: 120,
          key: "employee_num"
        },
        {
          title: "全职员工",
          width: 120,
          key: "employee_formal_num"
        },
        {
          title: "非全职员工",
          width: 120,
          key: "employee_noformal_num"
        },
        {
          title: "负责人",
          width: 120,
          key: "organization_leader"
        },
        {
          title: "分管领导",
          width: 120,
          key: "organization_subleader"
        }
      ],

      buttonProps: {
        type: "default",
        size: "small"
      },
      isEdit: false,
      tableLoading: false
    };
  },
  methods: {
    // 关闭右侧面板
    closeRightCard() {
      this.rightCardCloseStatus = false;
    },

    // 打开右侧快速编辑
    openRightCard(a, b) {
      this.formItem = {
        organization_name: "",
        organization_code: "",
        organization_short_name: "",
        organization_leader: "",
        organization_number: "",
        start_date: "",
        organization_subleader: "",
        organization_description:"",
        organization_functon: "",
        organization_id: this.organizationList[0].organization_id,
        organization_superior: "",
        organization_type: "公司",
        company_id: this.organizationList[0].organization_id
      };
      this.isEdit = false;
      this.rightCardCloseStatus = true;
    },

    // 添加组织
    addOrg() {},

    // 确定
    ok() {},

    // 取消
    cancel() {},

    // 渲染下级
    renderContent(h, { root, node, data }) {
      return h(
        "div",
        {
          class: "tree-row ivu-row"
        },
        [
          h(
            "div",
            {
              class: "tree-row-left col ivu-col ivu-col-span-10"
            },
            [
              h(
                "div",
                {
                  class: "left-title"
                },
                [
                  h("Icon", {
                    props: {
                      type: "ios-folder-outline"
                    },
                    class: "tree-icon"
                  }),
                  h("span", data.title)
                ]
              ),
              h(
                "div",
                {
                  class: "left-btns-wrap"
                },
                [
                  h(
                    "a",
                    {
                      class: "left-btn",
                      on: {
                        click: () => {
                          this.append(data);
                        }
                      }
                    },
                    "新增下级"
                  ),
                  h("a", { class: "left-btn" }, "编辑"),
                  h("a", { class: "left-btn" }, "展开")
                ]
              )
            ]
          ),
          h(
            "div",
            {
              class: "tree-row-right col ivu-col ivu-col-span-14"
            },
            [
              h(
                "div",
                {
                  class: "right-item ivu-col ivu-col-span-3"
                },
                [
                  h("span", "部门"),
                  h("Icon", {
                    props: Object.assign({}, this.buttonProps, {
                      icon: "ios-add-circle",
                      size: "18"
                    }),
                    style: {
                      width: "18px"
                    },
                    on: {
                      click: () => {
                        this.append(data);
                      }
                    }
                  })
                ]
              ),
              h(
                "div",
                {
                  class: "right-item ivu-col ivu-col-span-3"
                },
                [
                  h("span", "部门"),
                  h("Icon", {
                    props: Object.assign({}, this.buttonProps, {
                      icon: "ios-add-circle",
                      size: "18"
                    }),
                    style: {
                      width: "18px"
                    },
                    on: {
                      click: () => {
                        this.append(data);
                      }
                    }
                  })
                ]
              ),
              h(
                "div",
                {
                  class: "right-item ivu-col ivu-col-span-3"
                },
                [
                  h("span", "部门"),
                  h("Icon", {
                    props: Object.assign({}, this.buttonProps, {
                      icon: "ios-add-circle",
                      size: "18"
                    }),
                    style: {
                      width: "18px"
                    },
                    on: {
                      click: () => {
                        this.append(data);
                      }
                    }
                  })
                ]
              ),
              h(
                "div",
                {
                  class: "right-item ivu-col ivu-col-span-3"
                },
                [
                  h("span", "部门"),
                  h("Icon", {
                    props: Object.assign({}, this.buttonProps, {
                      icon: "ios-add-circle",
                      size: "18"
                    }),
                    style: {
                      width: "18px"
                    },
                    on: {
                      click: () => {
                        this.append(data);
                      }
                    }
                  })
                ]
              ),
              h(
                "div",
                {
                  class: "right-item ivu-col ivu-col-span-3"
                },
                [
                  h("span", "部门"),
                  h("Icon", {
                    props: Object.assign({}, this.buttonProps, {
                      icon: "ios-add-circle",
                      size: "18"
                    }),
                    style: {
                      width: "18px"
                    },
                    on: {
                      click: () => {
                        this.append(data);
                      }
                    }
                  })
                ]
              ),
              h(
                "div",
                {
                  class: "right-item ivu-col ivu-col-span-3"
                },
                [
                  h("span", "部门"),
                  h("Icon", {
                    props: Object.assign({}, this.buttonProps, {
                      icon: "ios-add-circle",
                      size: "18"
                    }),
                    style: {
                      width: "18px"
                    },
                    on: {
                      click: () => {
                        this.append(data);
                      }
                    }
                  })
                ]
              ),
              h(
                "div",
                {
                  class: "right-item ivu-col ivu-col-span-3"
                },
                [
                  h("span", "部门"),
                  h("Icon", {
                    props: Object.assign({}, this.buttonProps, {
                      icon: "ios-add-circle",
                      size: "18"
                    }),
                    style: {
                      width: "18px"
                    },
                    on: {
                      click: () => {
                        this.append(data);
                      }
                    }
                  })
                ]
              ),
              h(
                "div",
                {
                  class: "right-item ivu-col ivu-col-span-3"
                },
                [
                  h("span", "部门"),
                  h("Icon", {
                    props: Object.assign({}, this.buttonProps, {
                      icon: "ios-add-circle",
                      size: "18"
                    }),
                    style: {
                      width: "18px"
                    },
                    on: {
                      click: () => {
                        this.append(data);
                      }
                    }
                  })
                ]
              )
            ]
          )
        ]
      );
    },

    // 添加
    append(data) {
      console.log(data.row);
      // this.handleLoadData()

      // console.log(data);
      // this.$set(data.row, "_showChildren", false);
      // console.log(data.row);
      let isShowChildren = this.data13[0]._showChildren;

      this.data13[0]._showChildren = !isShowChildren;
      //   this.$set(data, "children", d);
    },

    // 移除
    remove(root, node, data) {
      const parentKey = root.find(el => el === node).parent;
      const parent = root.find(el => el.nodeKey === parentKey).node;
      const index = parent.children.indexOf(data);
      parent.children.splice(index, 1);
    },

    // 获取组织列表
    getOrgList() {
      this.tableLoading = true;
      http
        .get(org.organizationlist, {})
        .then(res => {
          let list = res.data.list;
          list.forEach(e => {
            if(!e.children){
              e.children = []
            }
            this.recursive(e);
            // e._loading = false;
          });
          this.orgList = list;
          this.tableLoading = false;
          console.log("组织列表", list);
        })
        .catch(error => {
          this.tableLoading = false;
          this.$Message.error(error);
        });
    },
    // 递归遍历
    recursive(obj) {
      this.organizationList.push({
        organization_id: obj.organization_id,
        organization_name: obj.organization_name
      });
      obj._showChildren = false;
      if(obj.children && obj.children.length > 0) {
        obj.children.forEach(item => {
          this.recursive(item);
        })
      }
    },
    // 保存
    save(type) {
      console.log(this.formItem);
  
      this.$refs["formValidate"].validate(valid => {
        if (valid) {
          if (type == 1) {
            this.save1Text = "保存中...";
            this.saving1 = true;
          } else {
            this.save2Text = "保存中...";
            this.saving2 = true;
          }
          if (!this.isEdit) {
            // 新增
            this.formItem.parent_organization_id = this.formItem.organization_id;
            this.formItem.organization_id = "";
          }
          const _d = new Date(this.formItem.start_date);
          this.formItem.start_date = _d.getFullYear() + '-' + this.dayMonthOperate((_d.getMonth() + 1)) + '-' + this.dayMonthOperate(_d.getDate());
          http
            .post(org.organizationcreate, { data: { ...this.formItem } })
            .then(res => {
              this.$Message.success("保存成功");
              if (type == 1) {
                this.save1Text = "保存并继续添加";
                this.formItem.start_date = new Date();
                this.saving1 = false;
              } else {
                this.save2Text = "保存";
                this.saving2 = false;
                this.closeRightCard(); //关闭右侧快速编辑
              }
              this.getOrgList();
            })
            .catch(error => {
              if (type == 1) {
                this.save1Text = "保存并继续添加";
                this.saving1 = false;
              } else {
                this.save2Text = "保存";
                this.saving2 = false;
              }
              this.$Message.error(error);
            });
        } else {
          console.log(1);
        }
      });
    },
    // 日期补0
    dayMonthOperate(s) {
      return s < 10 ? '0' + s : s;
    },
    // 获取组织详情
    getOrgDetail() {
      http
        .get(org.organizationshow, { params: { organization_id: 4 } })
        .then(res => {
          console.log("组织详情", res);
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },

    // 新增
    addNew(data) {
      this.isEdit = false;
      this.formItem = {
        organization_name: "",
        organization_code: "",
        organization_short_name: "",
        organization_leader: "",
        organization_number: "",
        start_date: "",
        organization_subleader: "",
        organization_description:"",
        organization_functon: "",
        organization_id: data.row.organization_id,
        organization_superior: "",
        organization_type: data.row.organization_type,
        company_id: data.row.company_id
      };
      this.rightCardCloseStatus = true;
      console.log('新增数据', data);
    },

    // 编辑
    edit(data) {
      this.formItem = {
        organization_code: data.row.organization_code,
        organization_short_name: data.row.organization_short_name,
        organization_leader: data.row.organization_leader,
        organization_number: data.row.organization_number,
        start_date: new Date(data.row.start_date),
        organization_subleader: data.row.organization_subleader,
        organization_description: data.row.organization_description,
        organization_functon: data.row.organization_functon,
        organization_id: data.row.organization_id,
        organization_superior: data.row.organization_superior,
        organization_type: data.row.organization_type,
        organization_name: data.row.organization_name,
        company_id: data.row.company_id
      };
      this.isEdit = true;
      this.rightCardCloseStatus = true;
    },

    // 展开
    expand(data) {
      data.row._showChildren = !data.row._showChildren;
      this.$nextTick(() => {
        this.orgList = this.orgList;
      })
      console.log('展开',data);
    },

    handleLoadData(item, callback) {
      //  callback(data);
    },

    superiorChange(a){
      this.formItem.parent_organization_id = a;
    },

    // 设置启用时间
    setStartTime(e){
      console.log('时间', e);
      this.formItem.start_date = e;
    }
  },
  mounted() {
    this.getOrgList(); //组织列表
    this.getOrgDetail(); //组织详情
  }
};
</script>
<style lang="scss" scoped src="./index.scss"></style>